<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>canvas绘制笑脸</title>
  <style>
      #cs {
          background-color: aquamarine;
      }
  </style>
</head>

<body>
<canvas height="300" id="cs" width="400"></canvas>

</body>
<script>
  let cs = document.querySelector('#cs')
  let ctx = cs.getContext('2d') // 画笔

  // 起笔
  ctx.beginPath()

  // draw face
  ctx.arc(75, 75, 50, 0, Math.PI * 2)
  // moveTo:把路径移动到画布中的指定点，不创建线条
  ctx.moveTo(110, 75)

  // draw mouse
  ctx.arc(75, 75, 35, 0, Math.PI)
  // draw left_eye
  ctx.moveTo(65, 65)

  ctx.arc(60, 65, 5, 0, Math.PI * 2)
  // draw right_eye
  ctx.moveTo(95, 65)
  
  ctx.arc(90, 65, 5, 0, Math.PI * 2)
  // draw
  ctx.stroke()

  // 抬笔
  ctx.closePath()
</script>

</html>